<template>
	<view class="merchant-apply">
		<custom-header title="商家入驻" :goBackFunc="goBack"></custom-header>
		<!-- 插画区域 -->
		<view class="illustration">
			<image src="/static/image/settled/banner.png" mode="aspectFit" />
		</view>
		<!-- 表单区域 -->
		<uni-forms :modelValue="formData" ref="uniForm" :rules="rules">
			<view class="form-section">
				<view class="form-title">提交入驻信息</view>
				<view class="form-list">
					<view class="form-item">
						<text class="label">店铺名称</text>
						<input class="input" type="input" v-model="formData['shopName']" placeholder="请输入店铺名称"
							placeholder-class="placeholder" />
					</view>
					<uni-forms-item label="时间:" name="date" required>
						<uni-datetime-picker type="datetime" return-type="timestamp" v-model="formData.date" placeholder="请选择日期"/>
					</uni-forms-item>
					<view class="form-item">
						<text class="label">类别</text>
						<view class="select" @tap="showCategoryPicker">
							<text :class="{'placeholder': !formData.category}">{{formData.category || '请选择类别'}}</text>
							<text class="arrow">›</text>
						</view>
					</view>
					<view class="form-item">
						<text class="label">联系方式</text>
						<input class="input" type="input" v-model="formData['phone']" placeholder="请输入联系方式"
							placeholder-class="placeholder" />
					</view>
					<view class="form-item">
						<text class="label">联系人</text>
						<input class="input" type="input" v-model="formData['contact']" placeholder="请输入联系人姓名"
							placeholder-class="placeholder" />
					</view>
					<view class="form-item">
						<text class="label">商家地址</text>
						<input class="input" type="input" v-model="formData['phone']" placeholder="请输入商家地址"
							placeholder-class="placeholder" />
					</view>
				</view>
			</view>
			
			<!-- 提交按钮 -->
			<view class="bottom-button-container">
				<button @click="saveData" class="button-1">提交信息</button>
			</view>
			<view class="bottom"></view>
		</uni-forms>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules:{},
				formData: {
					shopName: '',
					category: '',
					contact: '',
					phone: '',
					address: ''
				}
			}
		},
		onShow() {
			// 隐藏tabbar
			uni.hideTabBar()
		},
		methods: {
			// 提交信息
			saveData() {
				uni.showToast({
					title:"入驻成功"
				})
				this.formData = {
					shopName: '',
					category: '',
					contact: '',
					phone: '',
					address: ''
				}
			},
			goBack() {
				// 显示tabbar
				uni.showTabBar();
				// 返回首页
				uni.switchTab({
					url: '/pages/tabbar/home/home'
				})
			},
		}
	}
</script>

<style lang="scss">
	@import './settled.scss'
</style>